<template>
	<view class="shopping">
		<view class="Navtop" v-if="showhide" :style="{ paddingTop: lineHeight }">
			<!-- <input type="text" v-model="input" placeholder="请输入关键字或商品名" /> -->
			<uni-search-bar :radius="100" @click.native="search" cancelText=" " placeholder="请输入关键字或商品名"></uni-search-bar>
		</view>
		<view class="status_bar" :style="{ paddingTop: lineHeight }">
			<view
				style="    width: 100%;
				overflow: hidden;
				height: 200px;
				position: absolute;
				top: 0;"
			>
				<view class="sj"></view>
			</view>
			<image src="../../../static/store_logo@2x.png" class="Title" style="position: relative;"></image>
			<!-- <input type="text" v-model="input" placeholder="请输入关键字或商品名" /> -->
			<uni-search-bar :radius="100" @click.native="search" cancelText=" " placeholder="请输入关键字或商品名"></uni-search-bar>

			<scroll-view
				v-if="scrollhide"
				:style="'height:' + scrollHeight + 'px'"
				scroll-x="true"
				refresher-enabled="true"
				:refresher-triggered="refresherTriggered"
				:refresher-threshold="0"
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@refresherabort="onAbort"
			>
				<view id="myimage" class="banner" v-if="banners != ''">
					<swiper class="swiper-box" @change="change" autoplay="autoplay" circular interval="4000" :style="'height:380rpx'">
						<swiper-item class="swiper-box-item" v-for="(item, index) in banners" :key="index">
							<image class="swiper-item1" style="width: 100%;height: 380rpx;" :src="item.image||'../../../static/微信图片_20201124091755.png'" @click="toUrl(item)"></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- <canvas id="mycanvas" canvas-id="banner" style="height: 380rpx;width: 95%;    position: absolute;top: 0;left: 10px;"></canvas> -->
				<view class="icon1">
					<view class="icon-item">
						<image src="../../../static/home_ad_1.png"></image>
						肥猫自营品牌
					</view>
					<view class="icon-item">
						<image src="../../../static/home_ad_2.png"></image>
						专注好吃有特色的
					</view>
					<view class="icon-item">
						<image src="../../../static/home_ad_3.png"></image>
						品质保证 吃遍全国
					</view>
				</view>
				<view class="nav">
					<view v-if="categorys.length == 1" class="swiper-box swiper-recommendBox" @change="changerecommendGoods">
						<view v-for="(item, index) in categorys" :key="index">
							<view class="swiper-item">
								<view :id="item1.goods_id" class="recommendItem" v-for="(item1, index1) in item" :key="index1" @click="ToUrl(item1.category_id)">
									<image :src="item1.cover||'../../../static/微信图片_20201124091755.png'" style="width: 96rpx;height: 96rpx ;border-radius: 24px;"></image>
									<view class="ItemTitle" style="font-size: 20rpx; color: #3F3E3E;">{{ item1.name }}</view>
								</view>
							</view>
						</view>
					</view>
					<uni-swiper-dot v-else :info="categorys" :current="recommendGoodscurrent" field="nav" mode="default" bottom="0">
						<swiper class="swiper-box swiper-recommendBox" @change="changerecommendGoods">
							<swiper-item v-for="(item, index) in categorys" :key="index">
								<view class="swiper-item">
									<view :id="item1.goods_id" class="recommendItem" v-for="(item1, index1) in item" :key="index1" @click="ToUrl(item1.category_id)">
										<image :src="item1.cover||'../../../static/微信图片_20201124091755.png'" style="width: 96rpx;height: 96rpx ;border-radius: 24px;"></image>
										<view class="ItemTitle" style="font-size: 20rpx; color: #3F3E3E;">{{ item1.name }}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<view class="firstOrder" v-if="newUserGoods">
					<view class="title">
						<view class="left">新人首单全额返</view>
						<view class="right">
							<view>更多商品</view>
							<view class="icon"></view>
						</view>
					</view>
					<view class="content">
						<view class="item" v-for="(v, i) in newUserGoods" :key="i">
							<image class="img" :src="v.cover||'../../../static/微信图片_20201124091755.png'"></image>
							<view class="price">
								<text>￥{{ v.price }}</text>
								<view class="red">
									0元
									<view class="icon"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="advertisement"></view> -->
				<image
				    
					v-if="cover.cover.length != 0"
					:src="cover.cover[0].image||'../../../static/微信图片_20201124091755.png'"
					class="advertisement"
					mode="widthFix"
					
					@click="Details(cover.cover[0].action.params[0].value)"
				></image>
			</scroll-view>
			<view v-else>
				<view class="banner" v-if="banners != ''">
					<swiper class="swiper-box" @change="change" autoplay="autoplay" circular interval="4000" :style="'height:380rpx'">
						<swiper-item class="swiper-box-item" v-for="(item, index) in banners" :key="index">
							<image class="swiper-item1" style="width: 100%;height: 380rpx;" :src="item.image||'../../../static/微信图片_20201124091755.png'" @click="toUrl(item)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="icon1">
					<view class="icon-item">
						<image src="../../../static/home_ad_1.png"></image>
						肥猫自营品牌
					</view>
					<view class="icon-item">
						<image src="../../../static/home_ad_2.png"></image>
						专注好吃有特色的
					</view>
					<view class="icon-item">
						<image src="../../../static/home_ad_3.png"></image>
						品质保证 吃遍全国
					</view>
				</view>
				<view class="nav">
					<view v-if="categorys.length == 1" class="swiper-box swiper-recommendBox" @change="changerecommendGoods">
						<view v-for="(item, index) in categorys" :key="index">
							<view class="swiper-item">
								<view :id="item1.goods_id" class="recommendItem" v-for="(item1, index1) in item" :key="index1" @click="ToUrl(item1.category_id)">
									<image :src="item1.cover||'../../../static/微信图片_20201124091755.png'" style="width: 96rpx;height: 96rpx ;border-radius: 24px;"></image>
									<view class="ItemTitle" style="font-size: 20rpx; color: #3F3E3E;">{{ item1.name }}</view>
								</view>
							</view>
						</view>
					</view>
					<uni-swiper-dot v-else :info="categorys" :current="recommendGoodscurrent" field="nav" mode="default" bottom="0">
						<swiper class="swiper-box swiper-recommendBox" @change="changerecommendGoods">
							<swiper-item v-for="(item, index) in categorys" :key="index">
								<view class="swiper-item">
									<view :id="item1.goods_id" class="recommendItem" v-for="(item1, index1) in item" :key="index1" @click="ToUrl(item1.category_id)">
										<image :src="item1.cover||'../../../static/微信图片_20201124091755.png'" style="width: 96rpx;height: 96rpx ;border-radius: 24px;"></image>
										<view class="ItemTitle" style="font-size: 20rpx; color: #3F3E3E;">{{ item1.name }}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<view class="firstOrder" v-if="newUserGoods">
					<view class="title">
						<view class="left">新人首单全额返</view>
						<view class="right">
							<view>更多商品</view>
							<view class="icon"></view>
						</view>
					</view>
					<view class="content">
						<view class="item" v-for="(v, i) in newUserGoods" :key="i">
							<image class="img" :src="v.cover||'../../../static/微信图片_20201124091755.png'"></image>
							<view class="price">
								<text>￥{{ v.price }}</text>
								<view class="red">
									0元
									<view class="icon"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="advertisement"></view> -->
				<image
				    
					v-if="cover.cover.length != 0"
					:src="cover.cover[0].image||'../../../static/微信图片_20201124091755.png'"
					class="advertisement"
					mode="widthFix"
					
					@click="Details(cover.cover[0].action.params[0].value)"
				></image>
			</view>
			<view class="Popularity">
				<view class="top">
					<view class="left">
						<text class="Title">人气口碑排行榜</text>
						<text class="title">跟着买就对了</text>
					</view>
					<navigator url="/pagesA/Ranking/Ranking" class="right">
						<text>更多商品</text>
						<view class="Icon"></view>
					</navigator>
				</view>
				<view class="bottom">
					<!-- <view class="item" v-for="(item,index) in hotSaleGoods" :key="item.goods_id" @click="Details(item.goods_id)"> -->
					<view
						class="item"
						v-for="(item, index) in hotSaleGoods"
						:key="item.goods_id"
						@click="$linkTo('../../../pagesA/CommodityDetails/CommodityDetails?goods_id=' + item.goods_id)"
					>
						<view class="item-top" :class="'TOP' + index">TOP{{ index + 1 }}</view>
						<view class="item-center">
							<image class="img" :src="item.cover||'../../../static/微信图片_20201124091755.png'"></image>
							<view class="title">{{ item.name }}</view>
							<text>￥{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="SingleItem Popularity">
				<view class="top">
					<view class="left"><text class="Title">单品爆团</text></view>
					<view class="Right" v-if="todayShareGoodList == ''">
						<v-tabs
							v-model="activeTab"
							:scroll="false"
							color="#777777"
							activeColor="#DB1B22"
							fontSize="12px"
							lineScale="1"
							paddingItem="0 10rpx"
							lineColor="#DB1B22"
							:tabs="['明日团']"
						></v-tabs>
					</view>
					<view class="Right" v-else-if="tomorrowShareGoodList == ''">
						<v-tabs
							v-model="activeTab"
							:scroll="false"
							color="#777777"
							activeColor="#DB1B22"
							fontSize="12px"
							lineScale="1"
							paddingItem="0 10rpx"
							lineColor="#DB1B22"
							:tabs="['今日团']"
						></v-tabs>
					</view>
					<view class="Right" v-else>
						<v-tabs
							v-model="Index"
							@change="changeTab"
							:scroll="false"
							color="#777777"
							activeColor="#DB1B22"
							fontSize="12px"
							lineScale="1"
							paddingItem="0 10rpx"
							lineColor="#DB1B22"
							:tabs="['今日团', '明日团']"
						></v-tabs>
					</view>
				</view>
				<view class="Bottom">
					<view v-if="Index == 0">
						<view class="item" v-for="(item, index) in todayShareGoodList" :key="index" @click="Details(item.good_id)">
							<image :src="item.cover||'../../../static/微信图片_20201124091755.png'" class="img"></image>
							<view class="content">
								<view class="title">{{ item.name }}</view>
								<view class="center">
									<view class="progress"><cmd-progress :percent="item.progress * 100" stroke-color="#DB1B22" :show-info="false"></cmd-progress></view>
									<text>已抢{{ item.progress * 100 }}%</text>
								</view>
								<view class="price">
									<view class="priceNum">
										￥{{ item.group_buy_price }}
										<text>￥{{ item.price }}</text>
									</view>
									<view class="button">马上抢</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="item" v-for="(item, index) in tomorrowShareGoodList" :key="index" @click="Details(item.good_id)">
							<image :src="item.cover||'../../../static/微信图片_20201124091755.png'" class="img"></image>
							<view class="content">
								<view class="title">{{ item.name }}</view>
								<view class="center">
									<text>已有{{ item.addToCart }}人加入购物车</text>
								</view>
								<view class="price">
									<view class="priceNum">
										￥{{ item.group_buy_price }}
										<text>￥{{ item.price }}</text>
									</view>
									<view class="button">即将开抢</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="Modal" v-if="changeshow">
				<view class="box">
					<image class="top" src="@/static/redpacket_ad_bg_up.png" mode=""></image>
					<view class="title">
						<text>恭喜您获得新人福利</text>
						<text></text>
					</view>
					<view class="content">
						<view class="item" v-for="i in getNewUserCoupon" :key="i">
							<view class="top">
								<view class="left">
									<text style="font-size: 14px;">￥</text>
									<text style="font-size: 35px;">{{ parseInt(i.amount) }}</text>
								</view>
								<view class="right">
									<text style="font-size: 13px;font-weight: 500;line-height: 28px;">{{ i.name }}</text>
									<text style="font-size: 10px;font-weight: 500;line-height: 10px;">满{{ i.limit }}元可用</text>
								</view>
							</view>
							<view class="bottom">
								<text>有效期{{ i.date_expire }}</text>
							</view>
						</view>
					</view>
					<view class="Img">
						<image src="@/static/dai_red.png" mode=""></image>
						<view class="receive" @click="changeShow('receive')">立即领取</view>
						<view class="close" @click="changeShow('close')"></view>
					</view>
				</view>
			</view>
			<view class="product">
				<view class="colum">
					<view class="product_item" v-for="(item, index) in tag" :key="index" v-if="index % 2 == 0">
						<view class="grid-item" v-if="index % 7 === 0">
							<image
							v-if="getBanner[index / 7].image"
								mode="widthFix"
								:src="getBanner[index / 7].image||'../../../static/微信图片_20201124091755.png'"
								style="width: 100%;border-radius: 10rpx;margin: 5rpx;"
								@click="linkto(getBanner[index / 7].action_id, getBanner[index / 7].params)"
							></image>
						</view>
						<view v-if="index % 7 !== 0" class="grid-item product_grid-item" @click="Details(item.goods_id)">
							<image class="img" :src="item.cover||'../../../static/微信图片_20201124091755.png'" mode=""></image>
							<view class="text">
								<view class="title">{{ item.name }}</view>
								<view class="price">￥{{ item.price }}</view>
							</view>
							<view
								class="img1"
								v-if="item.comment"
								style="border-top:1px solid #ddd;width: 90%;display: flex;align-items: center;margin: 0 20rpx;padding-top: 20rpx;"
							>
								<image :src="item.comment_avatar||'../../../static/微信图片_20201124091755.png'" mode="widthFix" style="border-radius: 50px;width: 40rpx;height: 40rpx;margin-right: 20rpx;flex: 0 0 40rpx;"></image>
								<text style="font-size: 12px;color: #999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">
									{{ item.comment }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="colum">
					<view class="product_item" v-for="(item, index) in tag" :key="index" v-if="index % 2 != 0">
						<view class="grid-item" v-if="index % 7 === 0">
							<image
								v-if="getBanner[index / 7].image"
								mode="widthFix"
								:src="getBanner[index / 7].image||'../../../static/微信图片_20201124091755.png'"
								style="width: 100%;border-radius: 10rpx;margin: 5rpx;"
								@click="linkto(getBanner[index / 7].action_id, getBanner[index / 7].params)"
							></image>
						</view>
						<view v-if="index % 7 !== 0" class="grid-item product_grid-item" @click="Details(item.goods_id)">
							<image class="img" :src="item.cover||'../../../static/微信图片_20201124091755.png'" mode=""></image>
							<view class="text">
								<view class="title">{{ item.name }}</view>
								<view class="price">￥{{ item.price }}</view>
							</view>
							<view
								class="img1"
								v-if="item.comment"
								style="border-top:1px solid #ddd;width: 90%;display: flex;align-items: center;margin: 0 20rpx;padding-top: 20rpx;"
							>
								<image :src="item.comment_avatar||'../../../static/微信图片_20201124091755.png'" mode="widthFix" style="border-radius: 50px; width: 40rpx;height: 40rpx;margin-right: 20rpx;flex: 0 0 40rpx;"></image>
								<text style="font-size: 12px;color: #999;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
									{{ item.comment }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<BottomStatus></BottomStatus>
		</view>
	</view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
import BottomStatus from '@/components/BottomStatus/BottomStatus.vue';
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
import md5 from '@/common/api/md5.js';
import { requestUrl } from '@/common/config.js';
export default {
	data() {
		return {
			changeshow: true,
			lineHeight: '',
			banners: [],
			page: 1,
			Index: 0,
			cover: [],
			categorys: [],
			newUserGoods: [],
			hotSaleGoods: [],
			todayShareGoodList: [],
			tomorrowShareGoodList: [],
			current: 0,
			mode: 'round',
			getNewUserCoupon: [],
			tag: [],
			activeTab: 0,
			showhide: false,
			scrollhide: true,
			getBanner: [],
			swiperHeight: '',
			scrollHeight: 60,
			refresherTriggered: false,
			_refresherTriggered: false,
			recommendGoodscurrent: 0,
			navItem: [],
			Popularity: []
		};
	},
	onShow() {
		console.log(this.page);
	},

	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
			ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
			ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
			ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale // 屏幕的高度
		};
		// 底部tabBar的高度
		systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems.ktxWindowHeight; // 底部tabBar的高度
		this.lineHeight = systems.ktxStatusHeight + 'rpx';
	},

	onReady() {
		//swiper高度自适应
		this.getElementHeight('.swiper-box-item');
		this.getelementHeight('.advertisement');
	},
	methods: {
		linkto(e, i) {
			console.log(e, i);
			if (e == 1) {
			} else if (e == 3) {
				uni.switchTab({
					url: '../../home/home/home'
				});
			} else if (e == 6) {
				// uni.setStorage({
				// 	key: 'goods_id',
				// 	data: JSON.stringify(i),
				// 	success: function() {}
				// });
				uni.navigateTo({
					url: '../../../pagesA/CommodityDetails/CommodityDetails?goods_id=' + i
				});
			} else if (e == 8) {
				uni.navigateTo({
					url: '../../home/home/article_detail?article_id=' + i
				});
			}
		},
		onPulling(e) {
			// console.log("onpulling", e);
		},
		onRefresh() {
			console.log('自定义下拉刷新被触发');
			let _this = this;
			if (_this._refresherTriggered) {
				return;
			}
			_this._refresherTriggered = true;
			//界面下拉触发，triggered可能不是true，要设为true
			if (!_this.refresherTriggered) {
				_this.refresherTriggered = true;
			}
			this.loadStoreData();
		},
		onRestore() {
			console.log('自定义下拉刷新被复位');
			let _this = this;
			_this.refresherTriggered = false;
			_this._refresherTriggered = false;
		},
		onAbort() {
			console.log('自定义下拉刷新被中止	');
			let _this = this;
			_this.refresherTriggered = false;
			_this._refresherTriggered = false;
		},
		loadStoreData() {
			let _this = this;
			this.listData();
			setTimeout(() => {
				_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
				_this._refresherTriggered = false;
			}, 1000);
		},
		listData() {
			let _this = this;
			//这里是调用后台接口的方法数据
			this.title();
			uni.redirectTo({
				url: '/pages/shopping/shopping/shopping'
			});
		},
		getElementHeight(element) {
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					console.log(res[0]);
					if (!res) {
						//如果没获取到，再调一次
						this.getElementHeight();
					} else {
						this.swiperHeight = res[0].height;
						// console.log(this.swiperHeight)
					}
				});
			}, 20);
		},
		getelementHeight(element) {
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					console.log(res[0]);
					if (!res) {
						//如果没获取到，再调一次
						this.getElementHeight();
					} else {
						this.scrollHeight += res[0].bottom;
						console.log(this.scrollHeight);
					}
				});
			}, 20);
		},
		ToUrl(e) {
			uni.setStorage({
				key: 'category_id',
				data: JSON.stringify(e),
				success: function() {}
			});
			uni.navigateTo({
				url: '/pagesB/classification/classification'
			});
		},
		toUrl(e) {
			if (e.action.jump == 'goods_detail') {
				// uni.setStorage({
				// 	key: 'goods_id',
				// 	data: JSON.stringify(e.action.params[0].value),
				// 	success: function() {}
				// });
				uni.navigateTo({
					url: '/pagesA/CommodityDetails/CommodityDetails?goods_id=' + e.action.params[0].value
				});
			}
		},
		search() {
			this.$linkTo('../../search/index');
		},
		Details(e) {
			// uni.setStorage({
			// 	key: 'goods_id',
			// 	data: JSON.stringify(e),
			// 	success: function() {}
			// });
			uni.navigateTo({
				url: '/pagesA/CommodityDetails/CommodityDetails?goods_id=' + e
			});
		},
		changeTab(index) {
			this.Index = index;
		},
		change(e) {
			this.current = e.detail.current;
		},
		changerecommendGoods(e) {
			this.recommendGoodscurrent = e.detail.current;
		},
		title() {
			this.page = 1;
			this.changeshow = false;
			let time = Math.round(new Date().getTime() / 1000).toString();
			let _this = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = res.model;
					let t = ['t', model].join('=');
					let Time = ['time', time].join('=');
					let content = ['content=pinet.FeiMao.2017'].join();
					let arr = [content, t, Time].sort(function(a, b) {
						a - b;
					});
					let newarr = md5(arr.join('&'));
					uni.request({
						url: requestUrl + '/app/mall/getGoodsHomeData',
						method: 'get',
						data: {
							t: model,
							time: time,
							sign: newarr
						},
						success: function(res) {
							if (res.data.errcode == 0) {
								function group(array, subGroupLength) {
									let index = 0;
									let newArray = [];
									while (index < array.length) {
										newArray.push(array.slice(index, (index += subGroupLength)));
									}
									return newArray;
								}
								_this.cover = res.data.content.sepcial;
								console.log(_this.cover.cover[0].image);
								_this.banners = res.data.content.banners;
								_this.categorys = group(res.data.content.categorys, 10);
								console.log(_this.categorys);
							} else if (res.data.errcode == 99) {
								uni.showToast({
									title: res.data.message,
									icon: 'none',
									duration: 2000
								});
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
			});
			this.$request('/app/mall/getHomeGoods', 'post', {
				page: this.page
			}).then(res => {
				this.tag = res.content;
			});
			this.$request('/app/goods/tomorrowShareGoodList', 'post', {
				page: this.page
			}).then(res => {
				function dateTO(data) {
					//data为时间戳
					var date = new Date(data);
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
					var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
					// var strDate = Y + M + D; //转换为年月日
					return strDate;
				}
				res.content.forEach(v => {
					v.share_buy_begin_time = dateTO(v.share_buy_begin_time * 1000);
				});
				this.tomorrowShareGoodList = res.content;
				if (this.tomorrowShareGoodList.length != 0) {
					this.Index = 1;
				}
			});
			this.$request('/app/goods/todayShareGoodList', 'post', {
				page: this.page
			}).then(res => {
				function dateTO(data) {
					//data为时间戳
					var date = new Date(data);
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
					var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
					// var strDate = Y + M + D; //转换为年月日
					return strDate;
				}
				res.content.forEach(v => {
					v.share_buy_begin_time = dateTO(v.share_buy_begin_time * 1000);
				});
				this.todayShareGoodList = res.content;
				if (this.todayShareGoodList.length != 0) {
					this.Index = 0;
				}
			});

			this.$request('/app/mall/getBanner', 'post', {}).then(res => {
				this.getBanner = res.content;
			});
			this.$request('/app/goods/newUserGoods', 'post', {}).then(res => {
				this.newUserGoods = res.content;
			});
			this.$request('/app/goods/hotSaleGoods', 'post', {
				page_size: '3'
			}).then(res => {
				this.hotSaleGoods = res.content;
			});
			if (uni.getStorageSync('access_token')) {
				this.access_token = JSON.parse(uni.getStorageSync('access_token'));
			}
			this.$request('/app/coupon/getNewUserCoupon', 'post', {
				access_token: this.access_token
			}).then(res => {
				console.log(res);
				let timestamp = new Date().getTime();
				function formatDuring(mss) {
					var days = parseInt(mss / (1000 * 60 * 60 * 24));
					var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = (mss % (1000 * 60)) / 1000;
					return days + '天' + hours + '小时' + minutes + '分钟';
				}
				res.content.forEach(v => {
					v.date_expire = formatDuring(v.date_expire * 1000);
				});
				this.getNewUserCoupon = res.content;
				if (this.getNewUserCoupon != 0) {
					this.changeshow = true;
				} else {
					this.changeshow = false;
				}
			});
		},
		changeShow(e) {
			if (uni.getStorageSync('access_token')) {
				this.access_token = JSON.parse(uni.getStorageSync('access_token'));
			}
			if (e == 'receive') {
				let all = [];
				this.getNewUserCoupon.forEach(v => {
					all.push(v.coupon_id);
				});
				console.log(all);
				this.$request('/app/coupon/drawCoupon', 'post', {
					coupon_id: all,
					access_token: JSON.parse(uni.getStorageSync('access_token'))
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
				this.changeshow = false;
			} else if (e == 'close') {
				this.changeshow = false;
			}
		}
	},
	onPageScroll(e) {
		// console.log(e.scrollTop);//距离页面顶部距离
		if (e.scrollTop > 20) {
			this.scrollhide = false;
			this.showhide = true;
		} else {
			this.showhide = false;
			this.scrollhide = true;
		}
	},
	created() {
		this.title();
	},
	onReachBottom() {
		this.page++;
		this.$request('/app/mall/getHomeGoods', 'post', {
			page: this.page
		}).then(res => {
			res.content.forEach(v => {
				this.tag.push(v);
			});
		});
	},
	components: {
		uniSearchBar,
		uniGrid,
		uniGridItem,
		cmdProgress,
		BottomStatus,
		uniSwiperDot
	}
};
</script>

<style lang="less">
page {
	background-color: #f3f4f5;
}
.shopping {
	// height: 100%;
	// overflow-y: scroll;
	& > .status_bar {
		& > .Title {
			width: 134rpx;
			height: 32rpx;
			padding-top: 30rpx;
		}
	}
	.Navtop {
		width: 74%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		padding-right: 194rpx;
		padding-top: 32rpx;
		.uni-searchbar {
			padding: 4px !important;
		}
	}
	.Modal {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100000;
		background-color: rgba(0, 0, 0, 0.5);
		& > .box {
			width: 570rpx;
			height: 600rpx;
			background-color: #ea302b;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			& > .top {
				width: 570rpx;
				height: 204rpx;
				position: absolute;
				top: -66rpx;
				left: 0px;
				z-index: 101;
			}
			.title {
				position: relative;
				z-index: 110;
				display: flex;
				flex-flow: column;
				align-items: center;
				text {
					color: #ffdbb8;
					font-weight: bold;
					&:nth-child(1) {
						margin-top: 70rpx;
						margin-bottom: 14rpx;
						font-size: 40rpx;
					}
					&:nth-child(2) {
						font-size: 28rpx;
					}
				}
			}
			.content {
				height: 70%;
				overflow-y: scroll;
				display: flex;
				flex-direction: column;
				align-items: center;
				.item {
					padding: 20rpx 40rpx;
					box-sizing: border-box;
					width: 500rpx;
					background: url(@/static/coupon_bg_1.png) 0px -16rpx;
					background-size: 100% 114%;
					.top {
						display: flex;
						.left {
							color: #ea302b;
							font-weight: bold;
							margin-left: 10rpx;
							margin-right: 70rpx;
						}
						.right {
							display: flex;
							flex-direction: column;
							text {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}
						}
					}
					.bottom {
						margin-left: 16rpx;
						text {
							font-size: 20rpx;
							font-family: PingFangSC-Light, PingFang SC;
							font-weight: 300;
							color: #777777;
							line-height: 28rpx;
							text-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.08);
						}
					}
				}
			}
		}
		.Img {
			position: absolute;
			bottom: -164rpx;
			left: -64rpx;
			z-index: 101;
			image {
				width: 698rpx;
				height: 204rpx;
			}
			.receive {
				width: 240rpx;
				height: 70rpx;
				background: url(@/static/redpacket_ad_button_bg.png) no-repeat;
				background-size: 240rpx 70rpx;
				position: absolute;
				top: 90rpx;
				left: 232rpx;
				color: #a16120;
				font-weight: 500;
				font-size: 30rpx;
				line-height: 70rpx;
				text-align: center;
			}
			.close {
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto;
				background: url(@/static/cloce_white.png) no-repeat;
				background-size: 60rpx 60rpx;
			}
		}
	}
	.status_bar {
		height: 250rpx;
		width: 100%;
		background-color: #cc1526;
		padding-top: 65rpx;
		position: relative;

		.sj {
			width: 5000px;
			height: 5000px;
			border-radius: 12%;
			position: absolute;
			bottom: 0px;
			right: -423px;
			background-color: #cc1526;
		}
		.uni-searchbar__cancel {
			padding-left: 20rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}
		.firstOrder {
			width: 96%;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 5px;
			& > .title {
				background: linear-gradient(146deg, #f46156 0%, #e4362d 100%);
				border-radius: 10rpx 10rpx 0px 0px;
				display: flex;
				justify-content: space-between;
				padding: 18rpx 30rpx;
				.left {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #ffffff;
				}
				.right {
					width: 124rpx;
					padding: 0rpx 2rpx;
					background: linear-gradient(180deg, #ffead3 0%, #ffcab7 100%);
					box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.17);
					border-radius: 11px;
					border: 1px solid #ff8374;
					text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.17);
					font-size: 20rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #db1b22;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.icon {
						background: url(@/static/direction_right_red_new.png) no-repeat;
						background-size: 20rpx 20rpx;
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
			& > .content {
				padding: 18rpx 12rpx;
				background: linear-gradient(180deg, #f94c46 0%, #d72421 100%);
				border-radius: 0px 0px 5px 5px;
				display: flex;
				justify-content: space-between;
				.item {
					width: 190rpx;
					height: 190rpx;
					border: 10rpx solid #fbdcc8;
					background: #ffffff;
					border-radius: 5px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					.img {
						width: 122rpx;
						height: 122rpx;
					}
					.price {
						width: 85%;
						background: #e7ebec;
						border-radius: 9px;
						display: flex;
						align-items: center;
						// height: 40rpx;
						justify-content: space-between;
						padding-left: 10rpx;
						text {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							text-decoration: line-through;
						}
						.red {
							// height: 32rpx;
							background: linear-gradient(180deg, #f55953 0%, #df221e 100%);
							border-radius: 9px;
							font-size: 20rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #ffffff;
							text-decoration: none;
							display: flex;
							align-items: center;
							padding: 4rpx 10rpx;
							& > .icon {
								background: url(@/static/direction_right_red.png) no-repeat;
								background-size: 100%;
								width: 20rpx;
								height: 20rpx;
								margin-left: 5rpx;
							}
						}
					}
				}
			}
		}
		.Title {
			margin-left: 20rpx;
			color: #ffffff;
		}

		uni-search-bar {
			.uni-searchbar {
				background-color: rgba(0, 0, 0, 0);

				.uni-searchbar__box {
					height: 25px;
					margin-top: 10rpx;
					justify-content: start;
				}
			}
		}

		.banner {
			width: 96%;
			margin: 0 auto;
			border-radius: 20rpx;
			overflow: hidden;
			transform: translateY(0);
			.swiper-box {
				overflow: hidden;
				height: 380rpx;
				border-radius: 20rpx;
				// .swiper-item1 {
				// 	height: auto !important;
				// }
			}
		}
		.icon1 {
			width: 96%;
			margin: 10rpx auto;
			display: flex;
			justify-content: space-between;

			.icon-item {
				color: #db1b22;
				font-size: 20rpx;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
		}
		.nav {
			width: 96%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 5px;
			padding-top: 16rpx;
			height: 300rpx;
			/deep/.uni-swiper__dots-box {
				bottom: 0rpx !important;
			}
			.swiper-item {
				display: flex;
				flex-wrap: wrap;
			}
			.recommendItem {
				width: 20%;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
			}

			.img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 24px;
				background-color: pink;
			}

			.text {
				color: #3f3e3e;
				font-size: 20rpx;
			}
			.uni-swiper__dots-item {
				height: 4rpx !important;
				margin-left: 0px;
			}
		}

		.advertisement {
			width: 96%;
			margin: 15rpx;
		}

		.Popularity {
			width: 96%;
			margin: 10rpx auto;
			background-color: #fff;
			border-radius: 5px;

			.top {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					background: url('@/static/homelist_hot.png') no-repeat 0px 4rpx;
					background-size: 18px 18px;

					.Title {
						color: #333333;
						font-size: 32rpx;
						margin-left: 36rpx;
						font-weight: bold;
					}

					.title {
						margin-left: 10rpx;
						color: #777777;
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				.right {
					width: 136rpx;
					height: 42rpx;
					background: linear-gradient(180deg, #ff4d48 0%, #ea302b 100%);
					border-radius: 11px;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						color: #fff;
						font-size: 20rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
					}

					.Icon {
						height: 20rpx;
						width: 20rpx;
						background: url(@/static/direction_right_red.png) no-repeat 0px 0px;
						background-size: 20rpx 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: space-evenly;
				padding-bottom: 20rpx;

				.item {
					border-radius: 10rpx;
					width: 200rpx;

					.TOP0 {
						background: #db1b22;
					}

					.TOP1 {
						background: #db461b;
					}

					.TOP2 {
						background: #f38e22;
					}

					.item-top {
						width: 100%;
						height: 28px;
						line-height: 28px;
						font-size: 24rpx;
						border-radius: 10rpx 10rpx 0 0;
						font-weight: 600;
						color: #ffffff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.item-center {
						display: flex;
						flex-flow: column;
						justify-content: center;
						align-items: center;
						border-bottom: 1px solid #cccccc;
						border-left: 1px solid #cccccc;
						border-right: 1px solid #cccccc;
						border-radius: 0 0 10rpx 10rpx;
						.img {
							width: 100%;
							height: 180rpx;
							background-color: pink;
						}

						.title {
							color: #333333;
							width: 180rpx;
							height: 56rpx;
							font-size: 20rpx;
							line-height: 28rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						text {
							color: #db1b22;
							font-size: 24rpx;
							font-weight: 600;
							padding: 10rpx 0;
						}
					}
				}
			}
		}

		.SingleItem {
			.top {
				.Right {
					.v-tabs__container-line {
						bottom: 5px !important;
						background: #db1b22;
						width: 38px !important;
						height: 3px !important;
						border-radius: 5px;
						left: 23px;
						transform: translateX(-20px) !important;
					}
				}
			}

			.Bottom {
				.item {
					display: flex;
					padding: 20rpx;
					.img {
						width: 180rpx;
						height: 164rpx;
						margin-right: 20rpx;
					}
					.content {
						flex: 1;
						.title {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							height: 68rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							padding-bottom: 10rpx;
						}
						.center {
							height: 40rpx;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							.progress {
								flex: 1;
								margin-right: 20rpx;
							}
						}
					}
					.price {
						padding: 10rpx 0;
						display: flex;
						justify-content: space-between;
						.priceNum {
							font-size: 32rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #db1b22;
							text {
								margin-left: 8rpx;
								color: #999999;
								font-size: 28rpx;
								text-decoration: line-through;
							}
						}
						.button {
							padding: 0px 20rpx;
							// width: 132rpx;
							// height: 48rpx;
							background: #db1b22;
							border-radius: 14px;
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #ffffff;
							line-height: 24px;
							text-align: center;
						}
					}
				}
			}
		}
		.product {
			width: 96%;
			margin: 0 auto;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
			.colum {
				display: flex;
				flex-flow: column wrap;
				width: calc(100% / 2 - 10rpx);
			}
			.product_item {
				box-sizing: border-box;
				border-radius: 10rpx;
				margin: 6rpx;
				.product_grid-item {
					padding-bottom: 20rpx;
					background-color: #fff;
					border-radius: 10rpx;
				}
			}
			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.img {
					width: 100%;
					height: 340rpx;
					background-color: pink;
					border-radius: 10rpx 10rpx 0 0;
				}
				.text {
					display: flex;
					flex-direction: column;
					align-items: center;
					.introduce {
						margin: 10rpx 0;
						padding: 8rpx;
						background: #fff3f3;
						border-radius: 3px;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #db1b22;
					}
					.title {
						font-size: 26rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #333333;
						font-size: 26rpx;
						height: 68rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						padding: 20rpx 20rpx 0;
					}
					.price {
						padding: 0 20rpx;
						box-sizing: border-box;
						margin: 10rpx 0;
						width: 100%;
						line-height: 44rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #db1b22;
					}
					.evaluate {
						border-top: 1px solid #acacac;
						padding: 10rpx 0;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 74rpx;
						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 3px;
						}
						.content {
							flex: 1;
							font-size: 18rpx;
							font-family: PingFangSC-Light, PingFang SC;
							font-weight: 300;
							color: #777777;
							line-height: 26rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
}
</style>
